<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <body>

        <ui:composition template="./TemplatePrincipal.xhtml">

            <ui:define name="top">
                <h:form>
                    <p:commandButton update="panel,display" icon="ui-icon-triangle-1-w" action="LendList" title="Atras" ajax="false"/>
                    <p:commandButton update="panel,display" icon="ui-icon-home" action="MenuPrincipal" title="Menu Principal" ajax="false"/>
                </h:form>
            </ui:define>

            <ui:define name="left">
            </ui:define>

            <ui:define name="content">
                <f:view>
                    <h:form>
                        <p:panel header="Prestamo Crear/Editar" footer="Los campos con asterisco * son obligatorios." toggleable="true">
                            <h:panelGrid columns="2">
                                <p:outputLabel value="Usuario:" for="idUsuario" />
                                <p:selectOneMenu id="idUsuario" value="#{lendBean.idUsuarioSeleccionado}"  required="true" requiredMessage="The IdUsuario field is required.">
                                    <!-- TODO: update below reference to list of available items-->
                                    <f:selectItems value="#{userBean.lista}" var="item" itemLabel="#{item}" itemValue="#{item.id}"/>
                                </p:selectOneMenu>
                            </h:panelGrid>
                        </p:panel>
                        <p:commandButton update="panel,display" icon="ui-icon-check" action="LendCreateEdit" value="Aceptar" ajax="false" actionListener="#{lendBean.mostrarContenido}"/>
                    </h:form>
                    <br/>
                    <br/>

                    <h:form rendered="#{lendBean.visible}">
                        <p:panel header="Lista Libros">
                            <p:outputLabel value="Clave del Libro   " for="clave"/>
                            <p:inputMask mask="999-999" id="clave" value="#{lendBean.claveLibro}"/>
                            <p:commandButton  update="panel,display" icon="ui-icon-plusthick" action="LendCreateEdit" value="Agregar" actionListener="#{lendBean.agregarLibro}" ajax="false"/>
                            <br/>
                            <h:panelGrid columns="3">
                                <p:dataTable value="#{lendBean.listaLibros}" var="item">
                                    <p:column>
                                        <f:facet name="header">
                                            <p:outputLabel value="Clave"/>
                                        </f:facet>
                                        <p:outputLabel value="#{item.clave}"/>
                                    </p:column>
                                    <p:column>
                                        <f:facet name="header">
                                            <p:outputLabel value="Nombre"/>
                                        </f:facet>
                                        <p:outputLabel value="#{item.nombre}"/>
                                    </p:column>
                                    <p:column>
                                        <f:facet name="header">
                                            <p:outputLabel value="Isbn"/>
                                        </f:facet>
                                        <p:outputLabel value="#{item.isbn}"/>
                                    </p:column>
                                    <p:column>
                                        <f:facet name="header">
                                            <p:outputLabel value="Estado"/>
                                        </f:facet>
                                        <p:outputLabel value="#{item.estado}"/>
                                    </p:column>
                                    <p:column>
                                        <f:facet name="header">
                                            <p:outputLabel value="Disponible"/>
                                        </f:facet>
                                        <p:outputLabel value="#{item.disponible}"/>
                                    </p:column>
                                    <p:column>
                                        <f:facet name="header">
                                            <p:outputLabel value="Autor"/>
                                        </f:facet>
                                        <p:outputLabel value="#{item.idAutor}"/>
                                    </p:column>
                                    <p:column>
                                        <f:facet name="header">
                                            <h:outputText/>
                                        </f:facet>
                                        <center>
                                            <p:commandButton update="panel,display" icon="ui-icon-trash" title="Eliminar"
                                                             actionListener="#{lendBean.eliminarLibroLista}" ajax="false"/>
                                        </center> 
                                    </p:column>
                                </p:dataTable>
                            </h:panelGrid>
                            <br/>
                            <p:commandButton update="panel,display" icon="ui-icon-check" value="Aceptar" action="LendConfirm" ajax="false"/>
                            <p:commandButton update="panel,display" icon="ui-icon-closethick" value="Cancelar" action="LendList" ajax="false" immediate="true"/>
                        </p:panel>
                    </h:form>
                </f:view>
            </ui:define>
        </ui:composition>

    </body>
</html>
